<template>
    <div class="goodmood">
        <Header></Header>
        <layout class="content">
            <Row>
                <Col span="18">
                    <Col span="24">
                        <div class="whitebg lanmu"> <img src="https://img0.baidu.com/it/u=3865120497,1233684244&fm=26&fmt=auto&gp=0.jpg">
                            <h1>程序员的自我修养</h1>
                            <p>
                                博主名言：一人阿弥陀佛
                            </p>
                        </div>
                    </Col>
                    <Col span="24" class="bloglist">
                        <!--newslist-->
                        <div class="layui-col-xs12 whitebg zhuanti">
                            <h2 class="htitle">最新博文</h2>
                            <ul>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/jishu-1.png"
                  /></a>
                </i>
                <h2>css-实现蜂窝形状</h2>
                <span>
                  css基础，动画及border的真实面目。方法一：将六边形看成三个矩形的旋转拼接，六边形每一个角为60°，根据计算可以得出高宽之间的关系为根号3
                  ： 1。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/jishu-2.png"
                  /></a>
                </i>
                <h2>es6-Promise解决回调地狱</h2>
                <span>
                  假如我们有很多异步事件，而这些异步事件又有很紧密的联系，比如一个异步事件要依赖另一个异步事件的返回值，看下面的：
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/vue-1.png"
                  /></a>
                </i>
                <h2>vue之路由钩子函数</h2>
                <span>
                  vue路由钩子函数可以大致分为三类，他们的作用都是主要对路由的跳转进行控制，例如权限管理、登录判断、浏览器判断。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/react-1.png"
                  /></a>
                </i>
                <h2 title="react withRouter">react withRouter</h2>
                <span>
                  高阶组件中的withRouter, 作用是将一个组件包裹进Route里面,
                  然后react-router的三个对象history, location,
                  match就会被放进这个组件的props属性中。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/nodejs-1.png"
                  /></a>
                </i>
                <h2>Node.js 应用：Koa2 使用 JWT 进行鉴权</h2>
                <span>
                  在前后端分离的开发中，通过 Restful API
                  进行数据交互时，如果没有对 API
                  进行保护，那么别人就可以很容易地获取并调用这些 API
                  进行操作。那么服务器端要如何进行鉴权呢？
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/nodejs-1.png"
                  /></a>
                </i>
                <h2>使用 Node.js 开发简单的脚手架工具</h2>
                <span>
                  像我们熟悉的 vue-cli，react-native-cli
                  等脚手架，只需要输入简单的命令 vue init webpack
                  project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
            </ul>
                        </div>
                        <PageList></PageList>
                    </Col>
                </Col>
                <Col span="6" style="padding-left: 20px">
                    <Col span="24">
                        <Ranking></Ranking>
                        <Recommend></Recommend>
                        <TAG></TAG>
                        <GuseeLike></GuseeLike>
                    </Col>
                </Col>
            </Row>
        </layout>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from '@/components/Header'
    import Footer from "@/components/Footer";
    import Ranking from "@/components/list/Ranking";
    import Recommend from "@/components/list/Recommend";
    import TAG from "@/components/list/TAG";
    import GuseeLike from "@/components/list/GuseeLike";
    import PageList from "@/components/public/PageList";

    export default {
        name: "GoodMood",
        components: {
            PageList,
            GuseeLike,
            TAG,
            Recommend,
            Ranking,
            Footer,
            Header
        },
        data () {
            return {

            }
        },
        // components: {
        //     Header: () => import( '@/views/BlogList.vue'),
        //     Footer: () => import('@/views/GoodMood.vue')
        // }
    }
</script>

<style scoped>

</style>
